/**
 * 调度二期报警信息 组件 CSS 样式表
 * Author: Vicco Wang
 * Date : 2016.08.08
 *
 */

$frame-base-color   : #E0E0E0;
$base-blue-color    : #337ab7;
$base-green-color   : #449d44;
$base-yellow-color  : #f0ad4e;
$base-red-color     : #c9302c;

$base-darken-font-color : #212121;
$base-lighten-font-color : #E0E0E0;

@mixin frame-transition($wt: all, $sec: .3s) {
  -webkit-transition: $wt $sec ease 0s;
  -moz-transition: $wt $sec ease 0s;
  transition: $wt $sec ease 0s;
}
@mixin use-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex-align-center {
  -webkit-align-items: center;
  -webkit-justify-content: center;
  align-items: center;
  justify-content: center;
}

@mixin flex-column {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.zhx-alert-tip{
  position:fixed;
  background-color: lighten($frame-base-color, 10%);
  border:1px solid darken($frame-base-color, 5%);
  box-shadow: 0 0 15px darken($frame-base-color, 15%);
  z-index:1000;
  @include use-flex;
  @include frame-transition(all,.4s);

  >div{
    height:100%;
  }

  .zhx-alert-level{
    width:10px;

    &.normal {
      background-color: $base-green-color;
    }
    &.warn {
      background-color: $base-yellow-color;
    }
    &.danger {
      background-color: $base-red-color;
    }


  }

  .zhx-alert-content{
    flex:1;
    padding:5px;
  }

  .zhx-alert-btn{
    width: 80px;
    border-left:1px solid $frame-base-color;

    ul{
      @include use-flex;
      @include flex-column;

      li{
        border-bottom:1px solid $frame-base-color;
        @include use-flex;
        @include flex-align-center;
        @include frame-transition(all,.2s);
        height:35px;

        &:last-child{
          border-bottom:none;
        }

        &:hover{
          cursor: default;
          box-shadow:0 0 10px $frame-base-color inset;
        }

      }

    }

  }



}